<!-- 质量统计 -->
<script lang="ts" setup>
import MyBox from '@/components/MyBox.vue'
import { ref, watch } from 'vue'
const props = defineProps(['data'])

watch(
  () => props.data,
  (val) => {
    const { xList, actualList, targetList, legendList } = val
    options.value.legend.data = legendList
    options.value.xAxis.data = xList
    options.value.series[0].data = targetList
    options.value.series[0].name = legendList[0]
    options.value.series[1].data = actualList
    options.value.series[1].name = legendList[1]
    //取数组最大值，小于10取10
    // const maxValue = Math.max(...yList)
    // options.value.yAxis.max = maxValue > 10 ? maxValue : 10
  }
)

const options = ref({
  grid: {
    right: 20
  },
  legend: {
    show: false,
    right: 20,
    textStyle: {
      color: '#ebeef5',
      fontSize: 24
    },
    data: []
  },
  tooltip: {
    trigger: 'axis',
    confine: true,
    boundaryLink: true, // 设置 tooltip 不超出容器边界
    axisPointer: {
      type: 'shadow'
    }
  },
  xAxis: {
    type: 'category',
    axisLabel: {
      color: '#ebeef5',
      fontSize: 16
    },
    axisTick: {
      show: false
    },
    axisLine: {
      show: true,
      lineStyle: {
        color: '#182758',
        width: 2
      }
    },
    splitLine: {
      show: false
    },
    data: []
  },
  yAxis: {
    type: 'value',
    name: '%',
    nameTextStyle: {
      color: '#ebeef5',
      fontSize: 16,
      align: 'right',
      padding: [0, 12, 8, 0]
    },
    axisLabel: {
      color: '#ebeef5',
      fontSize: 16,
      align: 'right'
    },
    axisTick: {
      show: false
    },
    axisLine: {
      show: true,
      lineStyle: {
        color: '#182758',
        width: 2
      }
    },
    splitLine: {
      show: false
    }
  },
  series: [
    {
      data: [],
      name: '',//目标
      type: 'bar',
      barWidth: 20,
      barGap: '-100%',
      color: 'rgba(0,0,0, .0)',
      label: {
        show: true,
        position: 'center',
        formatter: function (params: any) {
          return `{border|${''.repeat(params.value.toString().length * 1)}} {value|${params.value}}`
        },
        rich: {
          value: {
            color: '#fff',
            fontSize: 16,
            fontWeight: 'bold',
            padding: [0, 0, 3, 0]
          },
          border: {
            display: 'block',
            width: 20,
            height: 7,
            backgroundColor: '#e6a23c',
            color: '#e6a23c',
            fontSize: 12
          }
        }
      }
      // itemStyle: {
      //   //圆角
      //   borderRadius: [30, 30, 30, 30]
      // }
    },
    {
      data: [],
      name: '',//实际
      type: 'bar',
      barWidth: 20,
      color: '#91cc75',
      label: {
        show: true,
        color: '#fff',
        fontSize: 16,
        position: 'inside',
        verticalAlign: 'middle', //垂直居中
        align: 'center', // 水平居中
        formatter: (params: any) => `${params.value}`
      }
      // itemStyle: {
      //   //圆角
      //   borderRadius: [30, 30, 30, 30]
      // }
    }
  ]
})
</script>
<template>
  <MyBox class="bad-count" title="质量统计">
    <template v-slot:main>
      <MyChart height="360px" :option="options" />
      <div v-if="data?.xList?.length" class="flex items-center justify-between legend">
        <p class="flex items-center target"><span class="square"></span> {{ data?.legendList[0]}}</p>
        <p class="flex items-center"><span class="square"></span> {{ data?.legendList[1]}}</p>
      </div>
    </template>
  </MyBox>
</template>
<style scoped>
.bad-count {
  position: relative;
  width: calc(50% - 8px);
}
.legend {
  width: 160px;
  position: absolute;
  right: 20px;
  top: 20px;
  font-size: 24px;
  .square {
    width: 20px;
    height: 10px;
    margin-right: 6px;
    border-radius: 1px;
    background-color: #91cc75;
  }
  .target .square {
    height: 5px;
    background-color: #e6a23c;
  }
}
</style>
